<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="上游商城"></u-navbar> -->
		<view class="fixed-top bg-white">
			<view class="px-2 mt-2 pb-2">
				<u-search placeholder="请输入关键字 " height="60" border-color="#8ED0F2" search-icon-color="#8ED0F2"
					bg-color="#fff" v-model="keyword" @input="search" :action-style="actionStyle"></u-search>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" class="mt-13"
			:show-scrollbar="false" @scrolltolower="loadMore" @scrolltoupper="refresh">
			<view v-for="(item, index) in tabContents" :key="index" class="pb-2 pl-2 pr-2 mt-2 content-item u-line">
				<!-- Add your tab content here -->
				<view class="font-14 text-333333 font-weight-bold">{{item.productServeName }}</view>
				<view class="dfex mt-2">
					<view class="text-A0A0A0 font-14 lineHight" @click="open(item.id)">
						<view>上游服务商：{{item.serviceName}}</view>
						<view class="text-999999 wraps">服务介绍：{{item.serviceIntroduction}}</view>
						<view>服务价格：{{item.servicePrice}} 元</view>
					</view>
					<view class="lineHight-3">
						<view>
							<u-button size="mini" type="warning" shape="circle" @click="makePhoneCall(item.phone)">电话咨询</u-button>
						</view>
						<view>
							<u-button size="mini" type="success" shape="circle"
								@click="addProductServe(item.id)">使用服务</u-button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!hasMore && tabContents.length > 0" class="text-center mt-3 mb-3">
				<view class="text-muted">没有更多数据了</view>
			</view>
			<view v-else-if="!hasMore && tabContents.length === 0" class="text-center mt-3 mb-3">
				<view class="iconfont text-999999 icon-zanwushuju font-48 pb-1"></view>
				<view class="text-999999 font-15">暂无数据</view>
			</view>
			<view v-else class="text-center mt-3 mb-3">
				<view class="btn btn-primary">加载更多</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabContents: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					total: 0 // 总页数
				},
				hasMore: true, // 是否还有更多数据

			}
		},
		onLoad() {
			this.NewList()
		},
		methods: {
			setDefaultPageConfig() {
				this.form.pageNo = 1
				this.form.pageSize = 10
				this.form.total = 0
			},
			search() {
				if (this.keyword.trim() === '') {
					// 如果关键字为空，则显示原始数据
					this.isSearching = false;
					this.hasMore = true;
					this.tabContents = []
					this.setDefaultPageConfig()
					this.NewList()
					return;
				}
				this.tabContents = []
				this.setDefaultPageConfig()
				this.NewList()
			},
			NewList() {
				$H.get('/upper/upperMarketProduct/agriculture/list', {
					...this.form,
					productServeName: this.keyword.trim(),
				}, {}).then(res => {
					this.tabContents = [...this.tabContents, ...res.result.records];
					this.phone = res.result.records[0].phone
					this.form.total = res.result.pages;
					this.page++;
					this.hasMore = this.tabContents.length < this.form.total;
				}).catch(error => {
					console.log(error)
				});
			},
			makePhoneCall(phone) {
				uni.showModal({
					title: '拨打电话',
					content: '确定要拨打电话吗？',
					success: (res) => {
						if (res.confirm) {
							this.doMakePhoneCall(phone);
						}
					}
				});
			},
			doMakePhoneCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			addProductServe(id) {
				uni.showModal({
					title: '使用服务',
					content: '是否确认发起上游产品/订单服务？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确认按钮，执行请求操作
							$H.post('/upper/upperMarketOrder/agriculture/addProductServe', {
									upperMarketProductId: id
								}, {
									header: {
										'Content-Type': 'application/x-www-form-urlencoded'
									}
								})
								.then(res => {
									// 请求成功处理逻辑
									uni.showToast({
										title: res.message,
										icon: 'success'
									});
								})
								.catch(error => {
									// 请求失败处理逻辑
									uni.showToast({
										title: '网络错误，请稍后再试',
										icon: 'none'
									});
								});
						} else if (res.cancel) {
							// 用户点击了取消按钮，不执行任何操作
						}
					}
				});
			},
			open(id) {
				uni.navigateTo({
					url: `/pages/tabbar/market/upstreamDetails?id=${id}`
				})
			},
			// 加载更多
			loadMore() {

				if (this.form.pageNo * this.form.pageSize >= this.form.total) {
					this.hasMore = false;
					return;
				}
				this.form.pageNo++;
				// 请求数据
				this.NewList();
			},
			// 下拉刷新
			refresh() {
				// 重置页码为 1
				this.form.pageNo = 1;
				// 清空数据列表
				this.tabContents = [];
				// 设置标记为有更多数据
				this.hasMore = true;
				// 重新请求数据
				this.NewList();
				// 结束下拉刷新动画
				uni.$emit('stopPullDownRefresh');
			},
		}
	}
</script>

<style>
</style>